<template>
  <div class="LoginStyleBox">
    <div class="LoginStyleRgba">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13945121728%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648033727&t=ab365f5d8bb9c3886613330010e0e9e7"
        alt=""
      />
    </div>
    <div class="LoginFromBox">
      <el-form ref="form" model="form" :rules="submitRules" label-width="80px">
        <el-form-item style="marginTop: 20px" label="用户名" prop="name">
          <el-input
            v-model="form.phone"
            style="width: 220px; height: 40px"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          style="width: 300px; height: 40px; marginTop: 20px"
          prop="password"
        >
          <el-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
            @keyup.enter.native="onSubmit('form')"
          ></el-input>
        </el-form-item>
        <el-button
          type="primary"
          style="width: 240px; height: 40px; marginTop: 20px; marginLeft: 70px"
          @click="onSubmit('form')"
          >立即登录</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  name: "Login",
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        alert("登录失败");
        callback(new Error("密码不能少于5位"));
      } else {
        alert("登录成功");
        callback();
      }
    };
    return {
      form: {
        phone: "",
        password: "",
      },
      submitRules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
      },
    };
  },
  methods: {
    async onSubmit() {
      let res = await Axios.post("/api/login", { ...this.from });
      window.localStorage.setItem("token", res.data.token);
      this.$router.push("/home");
    },
  },
};
</script>

<style>
.LoginStyleBox {
  width: 100%;
  height: 100%;
}
.LoginStyleRgba {
  width: 1000px;
  height: 600px;
  margin: 50px auto;
}
.LoginFromBox {
  top: 160px;
  right: 330px;
  width: 340px;
  height: 280px;
  border-radius: 20px;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
}
.LoginUserIpt {
  width: 260px;
  margin-left: 20px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
}
.LoginPassTpt {
  width: 260px;
  margin-left: 20px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
}
.LoginStyleBtn {
  width: 260px;
  margin-left: 20px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
  background: #1884f2;
  color: #ffff;
  font-size: 16px;
}
</style>